<template>
  <a-modal
    v-model:open="open"
    title="选择图片"
    width="50%"
    wrap-class-name="full-modal"
    style="top:50px"
    ok-text="确定"
    cancel-text="取消"
    @ok="handleOk"
    @cancel="handleCancel"
    :confirm-loading="confirmLoading"
  >
    <div class="flex gap-[20px]" id="printTable">
      <a-table
        :columns="aiColumns"
        :dataSource="aiImageDataSource"
        :row-selection="{selectedRowKeys:aiState.selectedRowKeys,onChange:handleAiSelectChange}"
        class="flex-1"
        :pagination="false"
        :scroll="{y:800}"
      >
        <template #headerCell="{column}">
          {{ column.title }}
          <a-tag color="#87d068" v-if="column.key==='aiImage'">
            一共有：{{ aiImageDataSource.length }}张
          </a-tag>
        </template>
        <template #bodyCell="{column ,record}">
          <template v-if="column.key==='aiImage'">
            <img class="imageSize" :src="record.ai_image_url" alt=""/>
          </template>
          <template v-if="column.key === 'part'">
            <span class="text-[20px]">{{ record.part }}</span>
          </template>
        </template>

      </a-table>
      <a-table
        :columns="normalColumns"
        :dataSource="normalImageDataSource"
        :row-selection="{selectedRowKeys:normalState.selectedRowKeys,onChange:handleNormalSelectChange}"
        :scroll="{y:800}"
        :pagination="false"
        class="flex-1"
        :customRow="normalClickThenSelect"
      >
        <template #headerCell="{column}">
          {{ column.title }}
          <a-tag color="#2db7f5" v-if="column.key==='normalImage'">
            一共有：{{ normalImageDataSource.length }}张
          </a-tag>
        </template>
        <template #bodyCell="{column ,record,index}">
          <!--          <div v-if="index%2!==1" style="background-color: #fafafa">-->
          <!--            <img class="imageSize" :src="record.image_url" alt=""/>-->
          <!--          </div>-->
          <template v-if="column.key==='normalImage'">
            <img class="imageSize" :src="record.image_url" alt=""/>
          </template>
          <template v-if="column.key === 'part'">
            <span class="text-[20px]">{{ record.part }}</span>
          </template>
        </template>

      </a-table>
    </div>

  </a-modal>
  <print-page ref="printPage" :user="user" :doctor="doctor" :inside-camera-text="insideCameraText"></print-page>
</template>

<script>
import {reactive, ref} from "vue";
import {useStore} from "vuex";
import PrintPage from "./PrintPage.vue";
import {message} from "ant-design-vue";
import VueDragResize from "vue-drag-resize";

export default {
  name: "ReportPrint",
  components: {PrintPage, VueDragResize},
  props: {
    id: {
      type: Number,
    },
    aiImageDataSource: {
      type: Array,
      default: () => {
        return []
      }
    },
    normalImageDataSource: {
      type: Array,
      default: () => {
        return []
      }
    },
    user: {
      type: Object,
      default: {}
    },
    doctor: {
      type: Object,
      default: {}
    },
    insideCameraText:{
      type: String,
      default:''
    }
  },
  watch:{
    aiImageDataSource(newValue, oldValue) {
      console.log('aiImageDataSource', newValue)
    },
    normalImageDataSource(newValue, oldValue) {
      console.log('normalImageDataSource', newValue)
    }
  },
  setup(props) {
    const store = useStore()
    let check_id = ref(null)
    const open = ref(false);
    const confirmLoading = ref(false);
    const printPage = ref(null);
    const MAX_AI_IMAGE_COUNT = 2;
    const MAX_NORMAL_IMAGE_COUNT = 6;
    const handleOk = () => {
      console.log('props.id', props.id)
      console.log('aiImageDataSource', props.aiImageDataSource)
      console.log('normalImageDataSource', props.normalImageDataSource)
      if (!aiState.selectedRowKeys.length || !normalState.selectedRowKeys.length) {
        message.error("请选择图片")
        return
      }
      if (aiState.selectedRowKeys.length > MAX_AI_IMAGE_COUNT) {
        message.error("最多选择2张AI图片")
        return
      }
      if (normalState.selectedRowKeys.length > MAX_NORMAL_IMAGE_COUNT) {
        message.error("最多选择8张AI图片")
        return
      }
      let result = {
        aiImage: [],
        normalImage: []
      }
      if (normalState.selectedRowKeys.length > 0) {
        normalState.selectedRowKeys.forEach((item) => {
          result.normalImage.push({
            image_url:props.normalImageDataSource[item].image_url,
            part:props.normalImageDataSource[item].part
          })
        })
      }
      if (aiState.selectedRowKeys.length > 0) {
        aiState.selectedRowKeys.forEach((item) => {
          result.aiImage.push({
            ai_image_url:props.aiImageDataSource[item].ai_image_url,
            part:props.aiImageDataSource[item].part
          })
        })
      }
      open.value = false;
      printPage.value.handleLoadImage(result)

      printPage.value.showModal()

    };

    const aiColumns = [
      {
        title: "AI图片",
        key: "aiImage",
      },
      {
        title: "部位",
        key: "part",
      }
    ]
    const normalColumns = [
      {
        title: "正常图片",
        key: "normalImage",
      },
      {
        title: "部位",
        key: "part",
      }
    ]

    const aiState = reactive({
      selectedRowKeys: [],
      loading: false,
    });
    const normalState = reactive({
      selectedRowKeys: [],
      loading: false,
      visible:true
    });

    /**
     *
     * @param selectedRowKeys 是行在选项中的位置，第一个就是1
     */
    const handleAiSelectChange = (selectedRowKeys) => {
      aiState.selectedRowKeys = selectedRowKeys;
    }
    const handleNormalSelectChange = (selectedRowKeys) => {
      normalState.selectedRowKeys = selectedRowKeys;
    }

    const normalClickThenSelect = (record, index) => {
      return {
        onClick: () => {

        }
      }
    }
    const showModal = () => {
      open.value = true;
    }
    const handleCancel = () => {
      open.value = false;
    };

    return {
      open,
      aiState,
      normalState,
      confirmLoading,
      printPage,
      aiColumns,
      check_id,
      normalColumns,
      handleAiSelectChange,
      handleNormalSelectChange,
      normalClickThenSelect,
      handleOk,
      showModal,
      handleCancel

    }
  }

}
</script>

<style scoped>
.imageSize {
  width: 160px;
  height: 160px;
}

@media print {
  body{
    margin: 0;
    width: 1000px;
  }
  .no-print{
    display: none;
  }
}

</style>
